3時間で作る「Best of Tokyo」シティガイド

[あなたのテーマ] についてのシティガイドを作っています。

実在する場所を 6〜8 件リサーチして、各スポットについて次の情報を集めてください。
1. 名前（日本語 + 英語）
2. 一言説明（その場所の魅力）
3. 住所
4. おおよその価格帯（¥ / ¥¥ / ¥¥¥）
5. おすすめの時間帯
6. 観光客があまり知らないローカルな豆知識

数より質を重視してください。有名な定番スポットと、
あまり知られていないローカルなお気に入りをバランスよく入れてください。

次に、このガイドに編集的な文脈を加えてください。

1. このガイドの雰囲気が伝わる短い導入文を 3〜4 文で書いてください。
   なぜこのテーマやエリアが面白いのか、どんな空気感なのかを入れてください。
2. 4〜5 スポットを自然につなぐ散策ルートを提案してください。
3. 初めてこのテーマを楽しむ人向けの「プロ向けヒント」を 3 つください。
4. フィルターに使えるタグやカテゴリを提案してください
   （例: "budget-friendly", "rainy day", "date spot", "solo-friendly"）。

ここまでの内容を、Web アプリで使える JSON 構造のドキュメントとしてまとめてください。
各スポットは次の形式にしてください。

{
  "name_en": "",
  "name_ja": "",
  "description": "",
  "address": "",
  "price": "",
  "best_time": "",
  "insider_tip": "",
  "tags": [],
  "lat": null,
  "lng": null
}

さらに、導入文、散策ルート、プロ向けヒントも
別フィールドとして含めてください。最後にファイルとして保存してください。

以下のリサーチデータを使って、React のシティガイド Web アプリを作ってください。

[ここに JSON データを貼り付ける]

アプリには次の要素を含めてください。
1. ヒーローセクション
   - ガイドタイトル
   - 導入文
   - 雰囲気のある背景画像（プレースホルダーまたはグラデーションで可）
2. フィルターバー
   - タグでスポットを絞り込めるようにする
3. カードグリッド
   - 各スポットをカード表示し、以下を含める
   - 名前（日本語 + 英語）
   - 説明
   - 価格帯
   - おすすめ時間帯
   - タグを小さなバッジとして表示
4. 詳細表示
   - カードをクリックすると insider tip を展開する
5. 下部に "Pro Tips" セクションを追加

Tailwind CSS を使ってください。表計算のようではなく、
雑誌の特集ページのような、エディトリアルでモダンな雰囲気にしてください。
シングルページアプリで、バックエンドは不要です。

デザインを次のように改善してください。
- ダークテーマを採用し、暖色系のアクセントカラー（amber / orange 系）を使う
- カードに控えめなホバーアニメーションを追加する
  （少し浮く + シャドウ）
- ヒーローセクションにグラデーションオーバーレイを追加する
- 日本語に合うクリーンなフォントスタックにする
  （英語は system-ui、日本語は Noto Sans JP をフォールバック）
- カード表示時に滑らかなフェードインアニメーションを追加する
- タグのフィルターピルをデザイン誌の UI のように見せる

次のインタラクティブ機能を追加してください。
1. タグフィルターをクリックしたとき、カードグリッドをアニメーションさせる
   （表示対象はフェードイン、非表示対象は滑らかにフェードアウト）
2. "Walking Route" セクションを追加し、
   おすすめルートを番号付きステップと接続線で表示する
3. 各カードに "copy address" ボタンを追加し、
   日本語の住所をクリップボードにコピーできるようにする
4. 小さなマッププレースホルダーを追加し、
   静的な埋め込み地図画像またはイラストを表示する

アプリを完全にレスポンシブにしてください。
- モバイルではカードを 1 カラムで縦積みにする
- 小さい画面ではフィルターバーを横スクロール可能にする
- ヒーローセクションの文字がどの画面サイズでも読みやすいようにする
- すべての操作要素をタップしやすいサイズにする

最後の仕上げをしてください。
- フッターに "Made with AI Builders x Qoder" と今日の日付を入れる
- ページ読み込み時に控えめなアニメーションを追加する
- 全体の余白とリズムが整って見えるようにする
- 価格帯の横に絵文字を追加する（💰 💰💰 💰💰💰）

私の東京シティガイドプロジェクトを紹介する、5 枚のビジュアルなスライドデッキを作ってください。

Guide title: [タイトル。例: "Hidden Kissaten: Tokyo's Retro Coffee Shops"]
Theme: [テーマ]
Number of spots: [スポット数]
Key highlights: [特に気に入っているスポットを 2〜3 件]

Slide structure:
Slide 1: Title slide — ガイド名 + "Built with Vibe Coding"
Slide 2: The Concept — このガイドが何についてのものか、誰向けか
Slide 3: Highlights — 印象的な 2〜3 スポットを説明付きで紹介
Slide 4: The Build Process — QoderWork で調査 → Qoder でコーディング → 合計 3 時間
Slide 5: Try It Yourself — QR コード用プレースホルダー + AI Builders / Qoder のリンク

見た目はクリーンでモダンにしてください。.pptx として保存してください。

Slide 3 または 4 に、アプリのスクリーンショットを置くスペースを追加してください。
プロっぽく見えるように、デバイスのモックアップフレームを付けてください。

このプロジェクトをデモするための 60 秒の発表スクリプトを書いてください。
次の流れを含めてください。
1. 何を作ったか、なぜこのテーマを選んだか（10 秒）
2. ガイド機能の簡単な紹介（30 秒）
3. どう作ったか — QoderWork で調査、Qoder でコーディング（15 秒）
4. 締めの一言（5 秒）

営業っぽくならず、自然で会話的なトーンにしてください。

[テーマ] に対して実在するスポットを 6〜8 件探してください。
含める項目: 名前（日本語 + 英語）、説明、住所、価格帯、
おすすめ時間帯、insider tip。

導入文を書き、散策ルートを提案し、
プロ向けヒントを 3 つ出し、フィルター用タグも提案してください。

全体を構造化 JSON にしてファイルとして保存してください。

React のシティガイドを作ってください: ヒーロー、フィルターバー、
カードグリッド、詳細表示、プロ向けヒントのセクション。
Tailwind を使い、モダンでエディトリアルな雰囲気にしてください。

さらに洗練してください: ダークテーマ、ホバーアニメーション、
日本語向けフォントスタック、フェードインアニメーション、
雑誌品質のデザイン。

インタラクションを追加してください: フィルター時のアニメーション、
散策ルート表示、住所コピーボタン、レスポンシブ対応。

5 枚のピッチデッキを作ってください: タイトル、コンセプト、
ハイライト、制作プロセス、Try It Yourself。 .pptx で保存してください。

60 秒のデモスクリプトを書いてください: テーマ紹介、
アプリ紹介、制作プロセス、締めの一言。